<template>
  <div>
    <div id="head">
      <van-icon class="biao" size="25px" @click="toHead()" name="arrow-left"
                style="position: absolute;left: 10px;" />
      数据集抄
    </div>
    <div style="position:absolute;top: 60px;left: 20px">
      <van-button
          v-for="(item, index) in buttons"
          :key="index"
          :type="activeIndex === index? 'info' : 'default'"
          @click="handleClick(index)"
          v-model="form.energyType">
        {{item}}
      </van-button>
    </div>
    <div style="width: 340px;margin-left: 20px;margin-top: 60px;border-radius: 8px;border: #ebedf0 2px solid;">
      <van-cell title="选择日期区间" :value="queryTime" @click="show = true" />
      <van-calendar v-model="show" :min-date="minSelectedDate" type="range" @confirm="onConfirm" />
    </div>
    <table border="1px" id="table"  >
      <tr>
        <th>设备名称</th>
        <th>起始数值</th>
        <th>截至数值</th>
        <th>差值</th>
      </tr>
      <tr v-for="item in centralizedList" :key="item.id">
        <td>{{item.deviceName}}</td>
        <td>{{item.startNumber}}</td>
        <td>{{item.endNumber}}</td>
        <td>{{item.difference}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data(){
    return{
      form:{
        energyType:"电",
      },
      activeIndex: 0,
      buttons: ['电', '水', '燃气'],
      show: false,
      timeList:[],
      minSelectedDate: new Date('2024-10-01'),
      centralizedList:[],
      queryTime:""
    }
  },
  methods:{
    findAll(){
      this.form.date1 = this.timeList[0];
      this.form.date2 = this.timeList[1];
      axios.post("http://localhost:9999/centralized/findAll",this.form).then(res=>{
        this.centralizedList = res.data;
      })
    },
    formatDate(date) {
        const year = date.getFullYear();
        const month = (`0${date.getMonth() + 1}`).slice(-2);
        const day = (`0${date.getDate()}`).slice(-2);
        return `${year}-${month}-${day}`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.queryTime = `${this.formatDate(start)} - ${this.formatDate(end)}`;
      this.timeList = this.queryTime.split(" - ");
      this.findAll();
    },
    handleClick(index) {
      this.activeIndex = index;
      this.form.energyType = this.buttons[index];
      this.findAll();
    },
    toHead(){
      this.$router.push('/medical')
    }
  },
  created(){
    this.findAll();
  }
}
</script>

<style scoped>
#head{
  background-color: #f5f5f5;
  height: 30px;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
#table{
  width: 340px;
  margin-top: 10px;
  margin-left: 20px;
  border-collapse: collapse;
}
</style>
